<script setup>
import Front from "@/icons/CustomerFront.vue"
import Back from "@/icons/CustomerBack.vue"
import Replace from "@/icons/Replace.vue"
import Enter from "@/icons/Enter.vue"
import SizeAuto from "@/icons/SizeAuto.vue"
import {computed} from "vue"

const props = defineProps({
  visible: Boolean
})

const emits = defineEmits(['update:visible'])

const handleClose = () => {
  emits('update:visible', false)
}

const isMac = computed(() => {
  const agent = navigator.userAgent.toLowerCase()
  return /macintosh|mac os x /i.test(agent)
})

const command = isMac.value ? '⌘' : 'Ctrl'

</script>

<template>
  <el-drawer
      :model-value="visible"
      show-close
      :append-to-body="true"
      title="快捷键"
      @close="handleClose"
      :size="350"
  >
    <div class="box">
      <h3>节点操作</h3>
      <h4>
        <span class="a"><el-icon><Component is="Share"/></el-icon>插入下级节点</span>
        <span class="b">Tab | Insert</span>
      </h4>
      <h4>
        <span class="a"><el-icon><Component is="Operation"/></el-icon>插入同级节点</span>
        <span class="b">{{isMac ? 'Return' : 'Enter'}}</span>
      </h4>
      <h4>
        <span class="a"><el-icon><Component is="Notification"/></el-icon>插入父级节点</span>
        <span class="b">Shift + Tab</span>
      </h4>
      <h4>
        <span class="a"><el-icon><Component is="Top"/></el-icon>上移节点</span>
        <span class="b">{{command}} + ↑</span>
      </h4>
      <h4>
        <span class="a"><el-icon><Component is="Bottom"/></el-icon>下移节点</span>
        <span class="b">{{command}} + ↓</span>
      </h4>
      <h4>
        <span class="a"><el-icon><Component is="CirclePlus"/></el-icon>展开/收起节点</span>
        <span class="b">/</span>
      </h4>
      <h4>
        <span class="a"><el-icon><Component is="Delete"/></el-icon>删除节点</span>
        <span class="b">Delete | Backspace</span>
      </h4>
      <h4>
        <span class="a"><el-icon><Component is="Delete"/></el-icon>紧删除当前节点</span>
        <span class="b">Shift + Backspace</span>
      </h4>
      <h4>
        <span class="a"><el-icon><Component is="CopyDocument"/></el-icon>复制节点</span>
        <span class="b">{{command}} + C</span>
      </h4>
      <h4>
        <span class="a"><el-icon><Component is="Crop"/></el-icon>剪切节点</span>
        <span class="b">{{command}} + X</span>
      </h4>
      <h4>
        <span class="a"><el-icon><Component is="DocumentCopy"/></el-icon>粘贴节点</span>
        <span class="b">{{command}} + V</span>
      </h4>
      <h4>
        <span class="a"><el-icon><Component is="EditPen"/></el-icon>编辑节点</span>
        <span class="b">{{isMac ? 'fn + F2' : 'F2'}}</span>
      </h4>
      <h4>
        <span class="a"><el-icon><Enter/></el-icon>文本换行</span>
        <span class="b">Shift + {{isMac ? 'Return' : 'Enter'}}</span>
      </h4>
      <h4>
        <span class="a"><el-icon><Back/></el-icon>回退</span>
        <span class="b">{{command}} + Z</span>
      </h4>
      <h4>
        <span class="a"><el-icon><Front/></el-icon>前进</span>
        <span class="b">{{command}} + Y</span>
      </h4>
      <h4>
        <span class="a"><el-icon><Component is="CircleCheck"/></el-icon>全选</span>
        <span class="b">{{command}} + A</span>
      </h4>
      <h4>
        <span class="a"><el-icon><Component is="CircleCheck"/></el-icon>多选</span>
        <span class="b">{{command}} + 左键</span>
      </h4>
      <h4>
        <span class="a"><el-icon><Component is="SetUp"/></el-icon>一键整理布局</span>
        <span class="b">{{command}} + L</span>
      </h4>
      <h4>
        <span class="a"><el-icon><Component is="Search"/></el-icon>搜索</span>
        <span class="b">{{command}} + F</span>
      </h4>
      <h4>
        <span class="a"><el-icon><Replace/></el-icon>替换</span>
        <span class="b">{{command}} + R</span>
      </h4>
      <h3>画布操作</h3>
      <h4>
        <span class="a"><el-icon><Component is="ZoomIn"/></el-icon>放大</span>
        <span class="b">{{command}} + + | {{command}} + 鼠标滚动</span>
      </h4>
      <h4>
        <span class="a"><el-icon><Component is="ZoomOut"/></el-icon>缩小</span>
        <span class="b">{{command}} + - | {{command}} + 鼠标滚动</span>
      </h4>
      <h4>
        <span class="a"><el-icon><Component is="Aim"/></el-icon>回到根节点</span>
        <span class="b">{{command}} + {{isMac ? 'Return' : 'Enter'}}</span>
      </h4>
      <h4>
        <span class="a"><el-icon><SizeAuto/></el-icon>适应画布</span>
        <span class="b">{{command}} + i</span>
      </h4>
    </div>
  </el-drawer>
</template>

<style scoped lang="scss">
.box {
  border-top: var(--el-border);
  line-height: 2.2;
  padding: 5px 0;

  h3 {
    color: var(--el-text-color-primary);
    padding: 5px 0;
  }

  h4 {
    font-weight: normal;
    color: var(--el-text-color-regular);
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    .a {
      display: flex;
      align-items: center;
      .el-icon {
        margin-right: 5px;
      }
    }
    .b {
      color: var(--el-text-color-placeholder)
    }
  }
}
</style>